<template>
	<div class="menu">
		<!-- 菜单项 -->
		<ul class="menu-list">
			<li
				v-for="item in menuGroup"
				:key="item.id"
				:class="item.active ? 'active' : ''"
				@click="toggleItem(item)"
			>
				<i :class="item.icon"></i>
				<span class="text">{{ item.label }}</span>
			</li>
		</ul>

		<!-- 全屏 -->
		<div class="menu-fullscreen">
			<el-popover
				placement="right"
				width="72"
				popper-class="rightPopver"
				trigger="hover"
				content="切换全屏"
			>
				<i slot="reference" @click="toggle" class="el-icon-full-screen menu-fullscreen__icon"></i>
			</el-popover>
		</div>
	</div>
</template>
 
<script>
export default {
	name: 'Menu',
	data() {
		return {
			menuGroup: [
				{
					id: $xy.RI(),
					label: '模板',
					icon: 'el-icon-folder-opened',
					active: true
				},
				{
					id: $xy.RI(),
					label: '场景',
					icon: 'el-icon-office-building',
					active: false
				},
				{
					id: $xy.RI(),
					label: '模型',
					icon: 'el-icon-coin',
					active: false
				},
				{
					id: $xy.RI(),
					label: '交互',
					icon: 'el-icon-magic-stick',
					active: false
				},
				{
					id: $xy.RI(),
					label: '面板',
					icon: 'el-icon-files',
					active: false
				},
				{
					id: $xy.RI(),
					label: '导入',
					icon: 'el-icon-download',
					active: false
				}
			]
		};
	},
	created() {
		this.init();
	},
	destroyed() {
		this.$EventBus.$off('toggleMenu');
	},
	methods: {
		// 初始化
		init() {
			// 默认选中模板
			this.$nextTick(() => {
				this.toggleItem(this.menuGroup[0]);
			});

			// 画布上点击切换菜单栏
			this.$EventBus.$on('changeMenu', (type) => {
				this.menuGroup.map((item) => {
					item.active = false;

					if (type === item.label) {
						item.active = true;
						this.$EventBus.$emit('toggleMenu', item.label);
					}
				});
			});
		},

		// 切换菜单栏
		toggleItem(val) {
			this.menuGroup.map((item) => {
				item.active = false;

				if (val.id === item.id) {
					val.active = true;
					// 派发一个全局事件
					this.$EventBus.$emit('toggleMenu', val.label);
				}
			});

			// 切换菜单退出打点模式
			$ue4.endPoint();
		},

		// 全屏切换
		async toggle() {
			await this.$fullscreen.toggle();
		}
	}
};
</script>
 
<style lang="scss">
.menu {
	font-size: 14px;
	width: 100%;
	height: 100%;
	background-color: $--xy-color-deep;
	border-right: $--xy-border-deep;
	min-height: 650px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;

	.menu-list {
		li {
			height: 60px;
			@include xy-dfc;
			margin: 15px 0;
			flex-direction: column;
			color: $--xy-color-light;
			font-size: 12px;
			cursor: pointer;
			font-weight: 400;
			@include xy-stopselect;

			i {
				font-size: 26px;
				margin-bottom: 5px;
			}

			&:hover {
				color: #fff;
			}
		}

		li.active {
			background-color: #3c67ed;
			color: #fff;
		}
	}

	.menu-fullscreen {
		width: 100%;
		height: 80px;
		@include xy-dfc;

		&__icon {
			cursor: pointer;
			color: $--xy-color-lighter;
			font-size: $--xy-size-large;

			&:hover {
				color: #fff;
				font-weight: bold;
			}
		}
	}
}
</style>